<template>
	<view>
		<!-- 输入型 -->
		<vi-dialog ref="input"
			:point="winSetting.point"
			:radius="winSetting.boxRadius"
			:useTitle="!!currItem.label"
			:title="currItem.label"
			:spaceInside="spaceInside"
			:spaceOutside="spaceOutside"
			:bottombar="bottombar"
			:width="winSetting.width"
			:maxWidth="winSetting.maxWidth"
			@change="winChange"
			@opened="winOpened">
			<view class="vi_formCreatorEditor" :class="{'vi_inputBox':['text','number','password','textarea'].includes(currItem.type)}">
				<!-- 文本 -->
				<view class="vi_fullX" v-if="currItem.type=='text'">
					<input class="input" type="text" :placeholder="currItem.placeholder" v-model="inValue"
						:maxlength="currItem.maxlength||mainSetting.maxLength"
						:focus="onFocus"
						@input="onInput"/>
				</view>
				
				<!-- 数字 -->
				<view class="vi_fullX" v-if="currItem.type=='number'">
					<input class="input" type="number" :placeholder="currItem.placeholder" v-model="inValue"
						:maxlength="currItem.maxlength||mainSetting.maxLength"
						:focus="onFocus"
						@input="onInput"/>
				</view>
				
				<!-- 密码 -->
				<view class="vi_fullX" v-if="currItem.type=='password'">
					<vi-password v-model="inValue"
						:placeholder="currItem.placeholder"
						:maxlength="currItem.maxlength||mainSetting.maxLength"
						:focus="onFocus"
						@input="onViInput"></vi-password>
				</view>
				
				<view class="vi_fullX" v-if="currItem.type=='sendcode'">
					<!-- 发送验证码 -->
					<common-sendcode v-model="inValue"
						:placeholder="currItem.placeholder"
						:httpData="currItem.httpData"
						:keys="currItem.keys"
						:useLoginQuest="currItem.useLoginQuest"
						:focus="onFocus"
						@input="onViInput"></common-sendcode>
				</view>
					
				<!-- 文本域 -->
				<textarea class="textarea vi_fullX" v-if="currItem.type=='textarea'" v-model="inValue"
					:placeholder="currItem.placeholder"
					:maxlength="currItem.maxlength||mainSetting.areaMaxlength"
					:style="{'line-height':1.5,'height':'15em'}"
					:focus="onFocus"
					@input="onInput"></textarea>
					
				<!-- 复选框、单选框 -->
				<vi-checkbox-group v-if="['radio','checkbox'].includes(currItem.type)"
					:groupId="'formCheckbox'+cId"
					:isRadio="currItem.type=='radio'"
					v-model="inValue"
					@change="dataChange">
					<view class="vi_mr_e1 vi_mb_e0p5" v-for="(opt,index) in currItem.options" :key="index">
						<vi-checkbox :groupId="'formCheckbox'+cId"
							:type="mainSetting.type"
							:size="mainSetting.size"
							:color="mainSetting.color"
							:value="opt.value"
							:disabled="opt.disabled"
							:readOnly="opt.readOnly"
							:disabledMsg="opt.disabledMsg"
							:readOnlyMsg="opt.readOnlyMsg">
							<text>{{opt.name}}</text>
						</vi-checkbox>
					</view>
				</vi-checkbox-group>
				
				<!-- 滑动条 -->
				<!-- 内部需要样式查询按钮宽高实际值，而多层嵌套组件在小程序上的渲染事件触发时，实际并没有渲染，导致查询无结果进而组件失控。这里须强制定义按钮宽高，回避内部样式查询 -->
				<view class="vi_grow">
					<vi-slider ref="slider" v-if="currItem.type=='slider'"
					v-model="inValue"
					:type="mainSetting.type"
					:size="mainSetting.size"
					:color="mainSetting.color"
					:radius="mainSetting.radius"
					:range="currItem.range"
					buttonWidth="1.75em"
					buttonHeight="1.75em"
					:min="Number(currItem.min)||undefined"
					:max="Number(currItem.max)||undefined"
					:tips="currItem.tips"
					:unit="currItem.unit"
					:refreshWatcher="refreshWatcher"
					@change="dataChange"></vi-slider>
				</view>
				
				
				<!-- 开关 -->
				<view class="vi_fbox" v-if="currItem.type=='switch'">
					<view class="vi_grow" v-if="currItem.template">
						<view v-html="currItem.template" @click="linkTo(currItem)"></view>
					</view>
					<view class="vi_grow" v-else>
						<text class="vi_placeholder" v-if="currItem.placeholder" @click="linkTo(currItem)">{{currItem.placeholder}}</text>
					</view>
					<vi-switch
						:type="mainSetting.type"
						:size="mainSetting.size"
						:color="mainSetting.color"
						:radius="mainSetting.radius"
						:mode="currItem.mode"
						:checked="currItem.checked"
						:value="inValue"
						:onValue="currItem.onValue"
						:offValue="currItem.offValue"
						@change="dataChange">
							<text class="iconfont" :class="currItem.buttonIcon" v-if="currItem.buttonIcon"></text>
						</vi-switch>
				</view>
				
				<!-- 步进器 -->
				<view class="vi_fbox" v-if="currItem.type=='stepper'">
					<view class="vi_grow vi_placeholder" v-if="currItem.placeholder">{{currItem.placeholder}}</view>
					<vi-stepper
						v-model="inValue"
						:type="mainSetting.type"
						:size="mainSetting.size"
						:color="mainSetting.color"
						:radius="mainSetting.radius"
						:min="currItem.min"
						:max="currItem.max"
						:step="currItem.step"
						:decimals="currItem.decimals"
						:fixDecimals="currItem.fixDecimals"
						:maxlength="currItem.maxlength"
						:boxWidth="currItem.boxWidth"
						:disabled="currItem.disabled"
						:readOnly="currItem.readOnly"
						:useLongPress="currItem.useLongPress"
						:unit="currItem.unit"
						@change="dataChange"></vi-stepper>
				</view>
			</view>
		</vi-dialog>
		
		<!-- 日期选择 -->
		<vi-datetime ref="datetime" :mode="currItem.mode" v-if="['date','datetime','year'].includes(currItem.type)"
			:type="mainSetting.type"
			:color="mainSetting.color"
			:value="inValue"
			:resFormat="currItem.resFormat"
			:pickType="currItem.type"
			:start="currItem.start"
			:end="currItem.end"
			:min="currItem.min"
			:max="currItem.max"
			:disabled="currItem.disabled"
			:readOnly="currItem.readOnly"
			:point="winSetting.point"
			:useTitle="winSetting.useTitle"
			:activeSubmit="winSetting.activeSubmit"
			:boxRadius="winSetting.boxRadius"
			:maxWidth="winSetting.maxWidth"
			:shift="winSetting.shift"
			:weekSet="winSetting.weekSet"
			:formatSet="winSetting.formatSet"
			:text="textSetting"
			:icon="iconSetting"
			@submit="dateChange"></vi-datetime>
		
		<!-- 选择器 -->
		<vi-select ref="selector" :mode="currItem.mode" v-if="['select','tree','page'].includes(currItem.type)"
			:isTree="['tree','page'].includes(currItem.type)?currItem.type:currItem.isTree||false"
			:treeSet="currItem.treeSet||emptyObj"
			:type="mainSetting.type"
			:color="mainSetting.color"
			:dataList="currItem.options"
			:value="inValue"
			:min="currItem.min||0"
			:max="currItem.max||0"
			:keys="currItem.keys"
			resFormat="option"
			:disabled="currItem.disabled"
			:readOnly="currItem.readOnly"
			:point="winSetting.point"
			:useTitle="winSetting.useTitle"
			:activeSubmit="winSetting.activeSubmit"
			:boxRadius="winSetting.boxRadius"
			:buttonHeight="winSetting.buttonHeight"
			:iconReverse="winSetting.iconReverse"
			:width="winSetting.width"
			:maxWidth="winSetting.maxWidth"
			:optionHeight="winSetting.optionHeight"
			:maxHeight="winSetting.maxHeight"
			:shift="winSetting.shift"
			:text="textSetting"
			:icon="iconSetting"
			@submit="selectChange"></vi-select>
	</view>
</template>

<script>
	export default{
		name:"commonFormCreatorEditor",
		props:{
			item:{
				type:[Object,null],
				default:null
			},
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			radius:{
				type:[String,Number,null],
				default:null
			},
			size:{
				type:[String,null],
				default:""
			},
			mainSet:{
				type:[Object,null],
				default:null
			},
			winSet:{
				type:[Object,null],
				default:null
			},
			text:{
				type:[Object,null],
				default:null
			},
			icon:{
				type:[Object,null],
				default:null
			},
			cId:{
				type:[String,null],
				default:""
			}
		},
		data(){
			return {
				inValue:"",
				emptyObj:{},
				winReady:false,
				onFocus:false,
				refreshWatcher:0,
			}
		},
		computed:{
			currItem(){
				return this.item ||{}
			},
			mainSetting(){
				return this.mainSet ||{}
			},
			winSetting(){
				return this.winSet ||{}
			},
			textSetting(){
				return this.text ||{}
			},
			iconSetting(){
				return this.icon ||{}
			},
			spaceInside(){
				if(["bottom","center"].includes(this.winSetting.point)){
					return 0
				}
				return ["0.5em",0,0,0]
			},
			spaceOutside(){
				if(["top","bottom"].includes(this.winSetting.point)){
					return ["0.5em","0.5em","1.5em","0.5em"]
				}
				return 0
			},
			bottombar(){
				//非底部弹窗
				if(this.winSetting.point!="bottom"){
					//非底部弹窗，给关闭按钮
					return {
						buttonHeight:this.winSetting.buttonHeight,
						list:[
							{event:"close", name: this.textSetting.close, close:true},
						]
					}
				}else{
					return {
						buttonHeight:this.winSetting.buttonHeight,
						line:true,
						lineHeight:"0.2em",
						backgroundColor:"#fdfdfd",
						list:[
							{event:"close", name: this.textSetting.close, close:true, bold:true},
						]
					}
				}
				//底部弹窗使用顶部按钮
				return {}
			},
		},
		methods:{
			linkTo(item){
				if(!item.url){
					return
				}
				this.$api.linkTo(item.url, item.urlType)
			},
			open(){
				if(['date','datetime','year'].includes(this.currItem.type)){
					this.$refs.datetime.open()
				}else if(['select','tree','page'].includes(this.currItem.type)){
					this.$refs.selector.open()
				}else{
					this.$refs.input.open();
				}
			},
			winOpened(){
				this.onFocus =true;
				//特殊处理
				this.refreshWatcher = (this.refreshWatcher +1)%10;
			},
			winChange(e){
				if(!e){//窗口关闭
					this.onFocus =false;
					//抛出失去焦点事件
					let itemType = this.currItem.type;
					if(["text","number","password","sendcode","textarea"].includes(itemType)){
						this.$emit("blur")
					}
				}
			},
			//抛出事件，应与H5版事件同步
			onInput(e){
				this.$emit("input",e)
			},
			onViInput(e){
				this.$emit("viInput",e)
			},
			dataChange(e){
				this.$emit("dataChange",e)
			},
			dateChange(e){
				this.$emit("dateChange",e)
			},
			selectChange(e){
				this.$emit("selectChange",e)
			}
		},

        watch:{
			"item.value":{
				immediate:true,
				handler(newValue){
					this.inValue = newValue;
				}
			},
		},
	}
</script>

<style lang="scss">
.input,.textarea{
	font-size: inherit;
}
.vi_formCreatorEditor{
	margin: 0.5em 0.5em 1em 0.5em;
	display: flex;
	justify-content: center;
	.input{
		line-height: 1.5;
		height: 1.5em;
	}
	&.vi_inputBox{
		padding: 0.5em;
		background-color: #f8f8f8;
		border-radius: 0.5em;
	}
	.vi_fbox{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.vi_grow{
		flex-grow: 1;
	}
	.vi_placeholder{
		color: #999;
	}
}
.vi_fullX{
	width: 100%;
}
.vi_mr_e1{
	margin-right: 1em;
}
.vi_mb_e0p5{
	margin-bottom: 0.5em;
}
</style>